<!-- 管理员列表 -->
<template>
    <div>
        <el-button type="primary" @click="shouAddAdmin">新增管理员 + </el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="tel" label="电话" width="180" />
            <el-table-column prop="role" label="角色" />
            <el-table-column prop="time" label="注册时间" :formatter="dateFormat"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="updateAdmin(scope.row)">修改</el-button>
                    <el-button type="danger" @click="delAdmin(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <div class="example-pagination-block">
            <el-pagination layout="prev, pager, next" :total="100" />
        </div>
        <!-- 新增管理员 -->
        <el-drawer v-model="visible" :show-close="false" :direction="direction">
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">{{ topTitle }}</h4>
                <el-button type="danger" @click="close" circle>
                    ×
                </el-button>
            </template>
            <el-form :model="addAdminData">
                <el-form-item label="账号">
                    <el-input placeholder="请输入账号" v-model="addAdminData.account" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" v-model="addAdminData.password" clearable></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input placeholder="请输入姓名" v-model="addAdminData.name"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input placeholder="请输入电话" v-model="addAdminData.tel"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-input placeholder="请输入角色" v-model="addAdminData.role" @keyup.enter="addAdminBtn"></el-input>
                </el-form-item>
                <el-form-item label="操作">
                    <el-button type="primary" @click="addAdminBtn">{{
                        topTitle
                    }}</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>


<script setup lang="ts">
import {
    getAdminList,
    delAdminList,
    addAdminList
} from "@/api/admin";
import { ref, reactive } from "vue";
import type { IAdmin, AddAdmin } from "@/util/admin";
import { ElNotification } from "element-plus";
import dayjs from "dayjs";
// 格式化日期
const dateFormat = (row: any) => {return dayjs(row.regtime) .format("YYYY-MM-DD HH:mm:ss");}

let direction = ref('ltr')
// 定义响应式的数组对象
let tableData = ref<Array<IAdmin>>([]);
// 加载管理员数据
function loadAdminList() {
    getAdminList().then((resp) => {
        if(resp.data.code == 20000){
            tableData.value.splice(0, tableData.value.length, ...resp.data.data);
        }
        
    });
}
loadAdminList();
/**
 * 删除管理员
 */
function delAdmin(id: string) {
    delAdminList({
        id: id
    }).then(resp => {
        if (resp.data.code == 20000) {
            ElNotification({
                message: "删除成功",
                type: "success",
            });
            loadAdminList();
        }
    })
}
// 添加和修改时使用的右侧抽屉窗口显示和隐藏的变量
let visible = ref<boolean>(false);
// 定义变量用于控制点击添加和修改时，弹出的右侧抽屉顶部标题
let topTitle = ref<string>("");
// 管理员对象
let addAdminData = reactive<AddAdmin>({
    account: 0,
    password: 0,
    name: "",
    tel: "",
    role: ""
});
// 新增管理员
function shouAddAdmin() {
    direction = ref('ltr')
    // 清空表单
    resetFrom();
    // 显示窗口
    visible.value = true;
    // 修改窗口顶部标题
    topTitle.value = "添加";
};
// 提交新增
function addAdminBtn() {
    if (topTitle.value == "添加") {
        addAdminList(addAdminData).then(resp => {
            if (resp.data.code == 20000) {
                ElNotification({
                    message: resp.data.msg,
                    type: "success",
                });
                loadAdminList();
                resetFrom();
            }
        })
    } else if (topTitle.value == "修改管理员") {
        // 提交修改数据
        addAdminList(addAdminData).then(resp => {
            if (resp.data.code == 20000) {
                ElNotification({
                    message: resp.data.msg,
                    type: "success",
                });
                loadAdminList();
                resetFrom();
            }
        })
    }

}
/**
 * 修改管理员
 */
function updateAdmin(data: any) {
    
    direction = ref('rtl')
    // 防止抽屉中的表单项有预留的数据
    resetFrom();
    // 修改窗口可见
    visible.value = true;
    // 修改窗口顶部标题
    topTitle.value = "修改管理员";
    // 修改前数据回显
    // 传入id
    addAdminData.id = data.id;
    addAdminData.account = data.account;
    addAdminData.password = data.password;
    addAdminData.name = data.name;
    addAdminData.tel = data.tel;
    addAdminData.role = data.role;


}
// 重置抽屉表单中的数据
const resetFrom = () => {
    addAdminData.account = 0;
    addAdminData.password = 0;
    addAdminData.name = "";
    addAdminData.tel = "";
    addAdminData.role = "";
};
</script>

<style scoped>
.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}
</style>